<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>禅道伴侣</title>
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <div class="back">
    <div id="loadingBox"></div>
    <div id="errorLoading"></div>
    <button id="setSmallSizeBig1" class="smallWindowBtn">大</button>
    <button class="smallWindowBtnMove">移</button>
    <div class="changeWindowSize">
      <span>禅道伴侣</span>
      <div class="rightBtns">
        <button id="setSmallSizeSmall">小</button>
        <!-- <button id="setSmallSizeCenter">中</button> -->
        <button id="setSmallSizeBig">大</button>
        <button id="syncData">同步</button>
      </div>
    </div>
    <dialog id="favDialog">
      <form method="dialog">
        <div>
          <button>关闭弹窗</button>
        </div>
        <h4>同步模块</h4>
        <p>
          <label for="syncDataMode">同步数据模式</label>
          <select id="syncDataMode">
            <option value="1">追加同步</option>
            <option value="2">覆盖同步</option>
            <option value="3">差异同步</option>
          </select>
        </p>
        <p>
          <label for="syncDataZentaosid">zentaosid</label>
          <input type="text" id="syncDataZentaosid">
        </p>
        <p><button id="syncBtn">同步禅道</button></p>

        <h4>订阅模块</h4>
        <p>
          <label for="watchPublishSystemId">部署系统id</label>
          <input type="text" id="watchPublishSystemId">
        </p> 
        <p>
          <label for="packageId">包id</label>
          <input type="text" id="packageId">
        </p>    
        <p><button id="watchBtn">订阅</button></p>

        <table>
          <thead>
            <th>
              订阅id
            </th>
            <th>
              学校id
            </th>
            <th>
              项目id
            </th>
          </thead>
          <tbody id="tbodySubscribeBox">
            
          </tbody>
        </table>
      </form>
    </dialog>
    <p>
      <button id="updateDetails">自动同步禅道和订阅</button>
    </p>
    <div class="filterBox">
      <input name="filterInput" type="text">
      <button name="filterBtn">过滤</button>
      <button name="clearFilterBtn">清空</button>
    </div>
    <div class="addBoxOut">
      <div class="addBox notShow" name="addBox">
        <ul>
          <li>
            <span>禅道名称</span>
            <input name="nameInput" type="text">
          </li>
          <li>
            <span>禅道链接</span>
            <input name="linkInput" type="text">
          </li>
          <li>
            <span>开始日期</span>
            <input name="dateInput" type="date">
          </li>
          <li>
            <button name="addBtn">添加</button>
          </li>
        </ul>
      </div>
      <button class="openOrClose" name="openOrClose">打开/关闭</button>
    </div>
    <div class="tableBox">
      <h3>未完成</h3>
      <table class="tableList">
        <thead>
          <tr>
            <th>禅道名称</th>
            <th>禅道链接</th>
            <th>开始时间</th>
            <th>完成时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody id="tbodyDataBox">
        </tbody>
      </table>
      <h3>已完成</h3>
      <table class="tableList">
        <thead>
          <tr>
            <th>禅道名称</th>
            <th>禅道链接</th>
            <th>开始时间</th>
            <th>完成时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody id="tbodyCompleteDataBox">
        </tbody>
      </table>
    </div>
    <!-- 修改弹窗 -->
    <div id="myModal" class="modal">
      <!-- 弹窗内容 -->
      <div class="modal-content">
        <span class="close">&times;</span>
        <p>编辑页面</p>
        <p>
          <span>禅道名称</span>
          <input name="editNameInput" type="text">
        </p>
        <p>
          <span>禅道链接</span>
          <input name="editLinkInput" type="text">
        </p>
        <p>
          <span>开始日期</span>
          <input name="editDateInput" type="date">
        </p>
        <p>
          <button name="editBtn">修改</button>
        </p>
      </div>
    </div>
  </div>
  <script src="./js/jsHelper.js"></script>
  <script src="./js/tool.js"></script>
  <script src="./js/index.js"></script>
</body>

</html>